<template>
	<div class="footbox">
		<div class="footer">
			<ul>
				<li v-for="(item, index) in items" :key="index" :class="{ on: isActive(item.link) }"
					@click="navigateTo(item.link)">
					<img
						:src="isActive(item.link) ? require(`@/assets/picture/f${item.activeImage}.png`) : require(`@/assets/picture/f0${item.image}.png`)" />
					<p><router-link :to="item.link">{{ item.name }}</router-link></p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import {
		updateCartToServer
	} from '@/assets/js/common.js';
	export default {
		name: 'footer',
		props: {
			msg: String
		},
		mounted() {
			setInterval(() => {
				updateCartToServer(this.$router);
				// console.log("发送更新购物车请求");
			}, 30000);
		},
		data() {
			return {
				activeIndex: 0,
				items: [{
						name: '首页',
						link: '/',
						image: '1',
						activeImage: '1'
					},
					{
						name: '购物车',
						link: '/gwc',
						image: '3',
						activeImage: '3'
					},
					{
						name: '订单',
						link: '/allDd',
						image: '2',
						activeImage: '2'
					},
					{
						name: '我的',
						link: '/my',
						image: '4',
						activeImage: '4'
					}
				]
			};
		},
		methods: {
			isActive(link) {
				return this.$route.path === link;
			},
			navigateTo(link) {
				if (this.$route.path !== link) {
					this.$router.push(link);
				}
			}
		}
	}
</script>

<style>
	@import url('@/assets/css/style.css');
</style>